<template>
	<view>
		<view class="rider_list">
			<view class="rider_item" v-for="(it_r,in_r) in pickuperList" :key="in_r">
				<view class="l-wrap" @click="handleChoosePickuper(it_r,in_r)">
					<view v-if="!it_r.choosed" class="icon">
						<image src="@/static/imgs/icons/choose0-icon.png" mode="aspectFill"></image>
					</view>
					<view v-else class="icon">
						<image src="@/static/imgs/icons/choose1-icon.png" mode="aspectFill"></image>
					</view>
					<text class="name ellispsis1">{{it_r.passengerName}}</text>
					<text class="type">{{it_r.typeName}}</text>
					<text class="ID">{{it_r.certificateNumber}}</text>
				</view>
				<!-- <view class="edit-icon" @click="handleGoBusAddRider(it_r)"><image src="@/static/imgs/icons/edit-icon.png" mode="aspectFill"></image></view> -->
			</view>
		</view>

		<view class="confirm-btn-wrap">
			<view class="confirm-btn tp-w690">
				<view class="btn confirm" @click="handleConfirmChoosedPickuper">确定</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				serviceType: '', // (去程|返程)
				title: '',
				pickuperList: [],
				curRiderPersonInfo: {}
			};
		},
		onLoad(opt) {
			this.serviceType = opt && opt.serviceType
		},
		onShow() {
			this.getRiderList()
		},
		methods: {
			// onshow 获取当前添加的接送人完整信息
			getRiderList() {
				this.pickuperList = JSON.parse(JSON.stringify(this.$store.getters.getRiderList))
				let arr = this.$store.getters.getPickuperList || []
				arr.forEach((it_a, in_a) => {
					this.pickuperList.forEach((item, index) => {
						if (it_a.id === item.id && ((it_a.in && it_a.in.destination) || (it_a.out && it_a.out.destination))) {
							this.pickuperList.splice(index, 1)
						}
					})
				})

				this.pickuperList.map(it_ => {
					it_.choosed = false
				})
				this.updateRiderList()
			},
			// 选择
			handleChoosePickuper(item, index) {
				this.pickuperList[index].choosed = !this.pickuperList[index].choosed
				// this.pickuperList.forEach(it_ => {
				// it_.choosed = false
				// if (item.id===it_.id) {
				// 	return it_.choosed = true
				// }
				// })
				// this.handleConfirmChoosedPickuper()
			},
			handleGoBusAddRider(item) {
				uni.navigateTo({
					url: '../travel/bus.addRider?id=' + item.id
				});
			},
			// 确定 
			handleConfirmChoosedPickuper() {
				let arr = this.pickuperList.filter(em => em.choosed)
				let picArr = this.$store.getters.getPickuperList
				let oldArr = [...picArr, ...arr]
				// new Set(...[arr1])

				// 去重
				const obj = {};
				oldArr = oldArr.reduce((cur, next) => {
					obj[next.id] ? '' : obj[next.id] = true && cur.push(next)

					return cur;

				}, [])
				this.$store.commit('upPickuperList', oldArr)
				this.$store.commit('upCurPickuperInfo', arr)
				uni.navigateBack({
					delta: 1
				});
			},
			updateRiderList() {
				const storage = this.$store.getters.getRiderList
				const arr = this.pickuperList
				arr.forEach((it_a, in_a) => {
					storage.forEach((it_s, in_s) => {
						if (it_a.id === it_s.id) {
							return it_a.choosed = true
						}
					})
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.rider_list {
		width: 690rpx;
		margin: 20rpx auto 98rpx;
		border-radius: 12rpx;
		background-color: #fff;
		overflow: hidden;

		.rider_item {
			height: 100rpx;
			display: flex;
			margin: 0 30rpx;
			align-items: center;
			justify-content: space-between;
			border-bottom: 1px solid #ebebeb;

			&:last-child {
				border-bottom: none;
			}

			.l-wrap {
				display: flex;
				align-items: center;
				font-size: 28rpx;

				.name {
					font-size: 30rpx;
					padding: 0 10rpx 0 20rpx;
					width: 120rpx;
				}

				.type {
					padding-right: 40rpx;
				}

				.icon {
					display: inline-block;
					height: 30rpx;
					width: 30rpx;
				}
			}
		}
	}

	.confirm-btn-wrap {
		height: 98rpx;
		background-color: #fff;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;

		.confirm-btn {
			display: flex;
			justify-content: space-between;

			.btn {
				height: 72rpx;
				line-height: 72rpx;
				text-align: center;
				width: 100%;
				margin: 13rpx auto;
				color: #fff;
				font-size: 32rpx;
				border-radius: 12rpx;

				&.confirm {
					background-color: $blue;
				}

				&.add {
					background-color: $yellow;
				}
			}
		}
	}
</style>
